<!--
 * @Author: linjituan linjituan@revolution.com
 * @Date: 2024-11-27 01:29:01
 * @LastEditors: linjituan linjituan@revolution.com
 * @LastEditTime: 2024-11-27 16:28:51
 * @FilePath: \hm-twx-admin\src\views\profile\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script lang="ts" setup>
import { createFollowPin } from "@/api/metaIO/index";
import { commentBox } from "@/components/commentBox/index";
import { msgPost } from "@/components/Post/index";
import { store } from "@/store";
import { useAppStore } from "@/store/modules/app";
import { userStore } from "@/store/modules/walletUser";
import * as metaidv2api from "@/utils/metaidv2api.js";
import { computed, onMounted, onUnmounted, ref, watch } from "vue";
import { useRoute } from "vue-router";

const appStore = useAppStore();
const walletUser = userStore(store);
const isMobile = ref(appStore.isMobile);
const isLogin = computed(() => walletUser.getIsLogin);
const userInfo: any = computed(() => walletUser.getUserInfoObj);
// 获取路由地址param
const route = useRoute();
let address = route.params.id as string;
const listContainer = ref<HTMLElement | null>(null);
// 获取metaid信息
const metaidInfo = ref<any>(null);
const followingList = ref<any>([]);
const followerList = ref<any>([]);
const followMsgList: any = ref([]);
const currentBuzzId = ref("");
let page = 1;
const followLoading = ref(false);

// 监听路由变化，变化时重新获取metaid信息

watch(
  () => route.params.id,
  async (newVal, oldVal) => {
    console.log("route.params.id", newVal);
    if (newVal !== oldVal) {
      address = newVal as string;
      if (address) {
        page = 1;
        followMsgList.value = [];
        await getMetaidByAddress();
      } else {
        setTimeout(() => {
          if (isLogin) {
            console.log("userInfo", userInfo.value);
            page = 1;
            followMsgList.value = [];
            createFollowPinFn(userInfo.value.metaid);
          }
        }, 300);
      }
    }
  }
);

onMounted(async () => {
  if (listContainer.value) {
    console.log("listContainer.value", listContainer.value);
    listContainer.value.addEventListener("scroll", handleScroll);
  }
  if (address) {
    await getMetaidByAddress();
  } else {
    setTimeout(() => {
      if (isLogin) {
        console.log("userInfo", userInfo.value);
        createFollowPinFn(userInfo.value.metaid);
      }
    }, 300);
  }
});

// 滚动到底部时继续加载列表
const handleScroll = () => {
  const container = listContainer.value;
  if (!container) return;

  const { scrollTop, scrollHeight, clientHeight } = container;
  if (scrollTop + clientHeight >= scrollHeight - 10 && followLoading.value) {
    laodingCurrentList();
  }
};

function laodingCurrentList() {
  page++;
  createFollowPinFn();
}

async function getMetaidByAddress() {
  const metaidRes: any = await metaidv2api.getMetaidByAddress(address);
  metaidInfo.value = metaidRes?.data;
  const followingListObj: any = await metaidv2api.getFollowingList(
    metaidInfo.value.metaid,
    0,
    1000
  );
  console.log("followingListObj", followingListObj);
  if (followingListObj.list) followingList.value = followingListObj.list;
  const followerListObj: any = await metaidv2api.getFollowerList(
    metaidInfo.value.metaid,
    0,
    1000
  );
  console.log("followerListObj", followerListObj);
  if (followerListObj.list) followerList.value = followerList.list;
  createFollowPinFn();
}

function createFollowPinFn(metaid?: string) {
  createFollowPin({
    metaidList: [metaid || metaidInfo.value?.metaid],
    page: page,
    path: "/protocols/simplebuzz,/protocols/banana",
    size: 5,
  }).then(async (res) => {
    console.log("createFollowPin", res);
    for (const item of res.list) {
      if (Array.isArray(followMsgList.value)) {
        followMsgList.value.push(item);
      } else console.error("followMsgList.value 不是一个数组");
    }
    console.log("followMsgList", followMsgList.value);
    if (followMsgList.value.length >= res.total) {
      followLoading.value = false;
    } else {
      followLoading.value = true;
    }
  });
}

function showBuzzDetail(id: string) {
  console.log("showBuzzDetail", id);
  currentBuzzId.value = id;
}

onUnmounted(() => {
  if (listContainer.value) {
    listContainer.value.removeEventListener("scroll", handleScroll);
  }
});
</script>

<template>
  <div class="profit-wrap" ref="listContainer">
    <div v-if="!isMobile" class="content-left"></div>
    <div class="content-center">
      <div class="body">
        <msgPost
          v-for="item in followMsgList"
          :key="item.id"
          :pinInfo="item"
          style="margin-bottom: 20px"
          @showBuzzDetail="showBuzzDetail"
        />
      </div>
      <commentBox
        v-if="currentBuzzId"
        :id="currentBuzzId"
        @showBuzzDetail="showBuzzDetail"
        @close="currentBuzzId = ''"
      ></commentBox>
    </div>
    <div v-if="!isMobile" class="content-right"></div>
  </div>
</template>

<style scoped  lang="less">
.profit-wrap {
  display: flex;
  height: 100%;
  overflow: auto;
  background: #f1f1f1;

  .content-right {
    flex: 1;
  }

  .content-center {
    flex: 1.5;
    align-content: baseline;

    .body {
      padding: 20px 20px 130px;
    }
  }

  .content-left {
    flex: 1;
  }
}
</style>